<template>
  <el-rate
    class="rate-icon"
    v-model="rateVal"
    :size="size"
    :disabled="read"
    :allow-half="allowHalf"
    :colors="[color, color, color]"
  />
</template>

<script setup lang="ts">
import { computed, watch } from 'vue'

const props = withDefaults(
  defineProps<{
    value: number
    size?: 'large' | 'default' | 'small'
    read?: boolean
    color?: string
    allowHalf?: boolean
  }>(),
  {
    size: 'default',
    read: false,
    color: '#3AACE3',
    allowHalf: false,
  },
)

const rateVal = computed(() => props.value)
const $emit = defineEmits<{
  (e: 'update:value', v: number): void
}>()
watch(rateVal, (val) => {
  $emit('update:value', val)
})
</script>

<style scoped lang="scss"></style>
